<template>
  <div class="salesKind  index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content  ">
          <span>消费渠道：</span>
          <el-input class="w60 h40" v-model="fileter.chnennelCode" clearable placeholder="请输入消费渠道"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>消费平台：</span>
          <el-input class="w60 h40" v-model="fileter.platformName" clearable placeholder="请输入消费平台"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>消费店铺：</span>
          <el-input class="w60 h40" v-model="fileter.storeName" clearable placeholder="请输入消费店铺"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>省份：</span>
          <el-input class="w60 h40" v-model="fileter.provinceName" clearable placeholder="请输入省份"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class=" form">
      <el-col :span="6">
        <div class="grid-content ">
          <span>城市：</span>
          <el-input class="w60 h40" v-model="fileter.cityName" clearable placeholder="请输入城市"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>品类名称：</span>
          <el-input class="w60 h40"  v-model="fileter.categoryName" clearable placeholder="请输入品类名称"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>付款月份：</span>
          <el-date-picker
            class="w50"
            v-model="fileter.saleDateArray"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <el-button icon="el-icon-search" type="primary" @click="findAll()" size="small"
          >搜索</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <div id="monthNumber" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="14">
        <div id="oneCustomers" class="grid-content"></div>
      </el-col>
      <el-col :span="10">
        <div id="onePays" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="table">
      <el-col :span="24">
        <div class="grid-content">
          <p class="title">月度商品品销售明细</p>
          <el-table border :data="tableData" style="width:100%">
            <el-table-column prop="saleDate" label="付款日" :formatter="forDate" width="auto"></el-table-column>
            <el-table-column prop="categoryName" label="商品品类" width="auto"></el-table-column>
            <el-table-column label="一次客">
              <el-table-column prop="newCustomerQuantity" label="客户数" width="auto"></el-table-column>
              <el-table-column prop="newTotalOrderQuantity" label="订单数" width="auto"></el-table-column>
              <el-table-column prop="newTotalSaleAmount" label="销售额" width="auto"></el-table-column>
              <el-table-column prop="newProductQuantity" label="商品数量" width="auto"></el-table-column>
              <el-table-column prop="newCustomersUnitPrice" label="客单价" width="auto"></el-table-column>
              <el-table-column prop="newOnePiecesUnitPrice" label="件单价" width="auto"></el-table-column>
            </el-table-column>
            <el-table-column label="回购客">
              <el-table-column prop="oldCustomerQuantity" label="客户数" width="auto"></el-table-column>
              <el-table-column prop="oldTotalOrderQuantity" label="订单数" width="auto"></el-table-column>
              <el-table-column prop="oldTotalSaleAmount" label="销售额" width="auto"></el-table-column>
              <el-table-column prop="oldProductQuantity" label="商品数量" width="auto"></el-table-column>
              <el-table-column prop="oldCustomersUnitPrice" label="客单价" width="auto"></el-table-column>
              <el-table-column prop="oldOnePiecesUnitPrice" label="件单价" width="auto"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mg15">
      <div class="monthDetail boxShodow">
        <p>月度一次客回购客对比</p>
        <el-table border :data="tableData1" style="width:100%">
          <el-table-column prop="saleDate" label="付款日" width="auto"></el-table-column>
          <!--<el-table-column prop="payData" label="商品名称" width="auto"></el-table-column>-->
          <el-table-column label="一次客">
            <el-table-column prop="newCustomerQuantity" label="客户数" width="auto"></el-table-column>
            <el-table-column prop="newTotalOrderQuantity" label="订单数" width="auto"></el-table-column>
            <el-table-column prop="newTotalSaleAmount" label="销售额" width="auto"></el-table-column>
            <el-table-column prop="newProductQuantity" label="商品数量" width="auto"></el-table-column>
            <el-table-column prop="newCustomersUnitPrice" label="客单价" width="auto"></el-table-column>
            <el-table-column prop="newOnePiecesUnitPrice" label="件单价" width="auto"></el-table-column>
          </el-table-column>
          <el-table-column label="回购客">
            <el-table-column prop="oldCustomerQuantity" label="客户数" width="auto"></el-table-column>
            <el-table-column prop="oldTotalOrderQuantity" label="订单数" width="auto"></el-table-column>
            <el-table-column prop="oldTotalSaleAmount" label="销售额" width="auto"></el-table-column>
            <el-table-column prop="oldProductQuantity" label="商品数量" width="auto"></el-table-column>
            <el-table-column prop="oldCustomersUnitPrice" label="客单价" width="auto"></el-table-column>
            <el-table-column prop="oldOnePiecesUnitPrice" label="件单价" width="auto"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "quantity",
    components: {},

    data() {
      return {
        fileter:{
          storeName:null,
          platformName:null,
          chnennelCode:null,
          provinceName:null,
          cityName:null,
          categoryName:null,
          saleDateArray:null,
          saleDateStart:null,
          saleDateEnd:null
        },
        value:"",
        options: [{
          value: '选项1',
          label: '黄金糕'
        }],
        tableData:[],
        tableData1: [
          {
            payData: "2019-11-27",
            consumerShop: "CHN10005",
            consumerPlace: "北京DEMO店",
            goodsId: "10117001",
            goodsName: "Demo300",
            customerNumber: "8",
            orderNumber: "5",
            saleRoom: "855",
            goodsNumber: "5",
            discount: "98.33%",
            unitPrice: "295",
            related: "1.0",
            peoplePay: "295",
            unitPrice: "210"
          },
          {
            payData: "2019-11-27",
            consumerShop: "CHN10005",
            consumerPlace: "北京DEMO店",
            goodsId: "10117001",
            goodsName: "Demo300",
            customerNumber: "8",
            orderNumber: "5",
            saleRoom: "855",
            goodsNumber: "5",
            discount: "98.33%",
            unitPrice: "295",
            related: "1.0",
            peoplePay: "295",
            unitPrice: "210"
          },
          {
            payData: "2019-11-27",
            consumerShop: "CHN10005",
            consumerPlace: "北京DEMO店",
            goodsId: "10117001",
            goodsName: "Demo300",
            customerNumber: "8",
            orderNumber: "5",
            saleRoom: "855",
            goodsNumber: "5",
            discount: "98.33%",
            unitPrice: "295",
            related: "1.0",
            peoplePay: "295",
            unitPrice: "210"
          }
        ]
      };
    },

    methods: {

      forDate:function(row,column){
        if(row.saleDate!=null){
         return row.saleDate.toString().substring(0,10)
        }
      },
      // 月度品类销售明细
      queryMonCategoryGuestDetail: function () {
        let this_ = this
        this.utils.request.queryMonCategoryGuestDetail(this.fileter, function (res) {
          if (res.code == "0000") {
            this_.tableData = res.data
          }
        });
      },

      // 月度一次客回购客对比
      queryMonOneMoreInfo: function () {
        let this_ = this
        this.utils.request.queryMonOneMoreInfo(this.fileter, function (res) {
          if (res.code == "0000") {
            this_.tableData1 = res.data
          }
        });
      },
      // 月销售单品
      month() {
        let month = document.getElementById("monthNumber");
        let monthWrap = this.$echarts.init(month);
        this.utils.request.queryPrduAmoUnitprice(this.fileter, function (res) {
          let option = {
            title: {
              text: "月度商品销售额&单价"
            },
            legend: {
              data: ["销售额", "件单价"],
              textStyle: {
                fontSize: 16
              },
              itemWidth: 40,
              itemHeight: 20
            },
            xAxis: {
              data: res.data.x,
              axisLabel: {
                interArrival: 0,
                textStyle: {
                  fontSize: 14
                }
              }
            },
            yAxis: [
              {
                min: 0,
                max: 5,
                interval: 1,
                name: "销售额",
                splitLine: {show: false},
                axisLabel: {
                  formatter: "{value} 百万"
                }
              },
              {
                min: 0,
                max: 300,
                interval: 50,
                name: "件单价",
                position: "right",
                splitLine: {show: false}
              }
            ],
            series: [
              {
                name: "销售额",
                type: "bar",
                color: "#1ea084",
                barWidth: "30%",
                data: res.data.y1
              },
              {
                name: "件单价",
                type: "line",
                smooth: true,
                color: "#b0d1b5",
                yAxisIndex: 1,
                data: res.data.y2
              }
            ]
          };
          monthWrap.setOption(option);
        })

      },
      // 一次客回购客客户数
      oneCustomers() {
        let oneCustomers = document.getElementById("oneCustomers");
        let oneWrap = this.$echarts.init(oneCustomers);
        this.utils.request.queryGuestQuantity(this.fileter, function (res) {
          if (res.code == "0000") {
            let option = {
              title: {
                text: "一次客回购客客户数"
              },
              legend: {
                textStyle: {
                  fontSize: 16
                },
                itemWidth: 40,
                itemHeight: 20
              },
              xAxis: {
                data: res.data.x,
                axisLabel: {
                  interArrival: 0,
                  rotate: 30,
                  textStyle: {
                    fontSize: 14
                  }
                }
              },
              yAxis: [
                {
                  type: "value",
                  interval: 1,
                  splitLine: {show: false},
                  axisLabel: {
                    formatter: "{value} 千"
                  }
                }
              ],
              series: [
                {
                  name: "一次客",
                  type: "bar",
                  barWidth: "20%",
                  color: "#1ea084",
                  data: res.data.y1
                },
                {
                  name: "回顾客",
                  type: "bar",
                  barWidth: "20%",
                  color: "#b0d1b5",
                  data: res.data.y2
                }
              ]
            };
            oneWrap.setOption(option);
          }
        })
      },
      // 一次客回购客销售额占比
      onePays() {
        let onePays = document.getElementById("onePays");
        let paysWrap = this.$echarts.init(onePays);
        this.utils.request.queryGuestAmount(this.fileter, function (res) {
          if (res.code == "0000") {
            let option = {
              title: {
                text: "一次客回购客销售额占比"
              },
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              legend: {
                orient: "vertical",
                x: "600px",
                textStyle: {
                  fontSize: 16
                },
                itemWidth: 40,
                itemHeight: 20
              },
              series: [
                {
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "20",
                      fontWeight: "bold"
                    }
                  },
                  data: res.data
                }
              ]
            };
            paysWrap.setOption(option);
          }
        })

      },
      //重置
      resetForm:function () {
        this.fileter={
          storeName:null,
          platformName:null,
          chnennelCode:null,
          provinceName:null,
          cityName:null,
          categoryName:null,
          saleDateArray:null,
          saleDateStart:null,
          saleDateEnd:null
        }
        this.month();
        this.oneCustomers();
        this.onePays();
        this.queryMonCategoryGuestDetail()
        this.queryMonOneMoreInfo()
      },

      //查询
      findAll:function () {
        if(this.fileter.saleDateArray!=null){
          this.fileter.saleDateStart=this.fileter.saleDateArray[0]
          this.fileter.saleDateEnd=this.fileter.saleDateArray[1]
        }
        this.month();
        this.oneCustomers();
        this.onePays();
        this.queryMonCategoryGuestDetail()
        this.queryMonOneMoreInfo()
      }
    },

    mounted() {
      this.month();
      this.oneCustomers();
      this.onePays();
      this.queryMonCategoryGuestDetail()
      this.queryMonOneMoreInfo()
    }
  };
</script>
<style lang="scss" scoped>
 @import "../../../../assets/css/dataCenterEcharts.css";

  .salesKind {
    .common-contanier {
      padding: 20px;
      height: 400px;
      margin: 0 auto;
    }
    .common-contanier1 {
      padding: 20px;
      height: 400px;
    }
    .common-contanier2 {
      padding: 20px;
      height: 400px;
      box-sizing: border-box;
    }
    .monthDetail {
      height: 500px;
      padding: 10px;
      overflow: scroll;
      p {
        text-align: left;
        padding-left: 20px;
        font-size: 20px;
        font-weight: 600;
      }
    }
  }

  .mr10 {
    margin-right: 10px;
  }

  .mg15 {
    margin-bottom: 15px;
  }

  .ec-container .form /deep/ .el-col .grid-content .el-select {
    width: 150px;
  }

  // .ec-container .form {
  //   .el-date-editor {
  //     width: 120px;
  //   }
  // }
</style>

